<template>
    <lightning-card title="NavToRecord" icon-name="custom:custom96">
        <template lwc:if={contact.data}>
            <div class="slds-var-m-around_medium">
                Example Contact:
                <p>{contact.data.Name}</p>
                <p>{contact.data.Title}</p>
                <p class="slds-var-m-bottom_small">
                    <lightning-formatted-email
                        value={contact.data.Email}
                    ></lightning-formatted-email>
                </p>
                <lightning-button
                    label="Go to Contact Record"
                    onclick={navigateToContact}
                    class="slds-var-m-right_x-small"
                ></lightning-button>
                <lightning-button
                    label="Go to Edit Contact"
                    onclick={navigateToEdit}
                ></lightning-button>
            </div>
        </template>
        <template lwc:elseif={contact.error}>
            <c-error-panel errors={contact.error}></c-error-panel>
        </template>
        <c-view-source source="lwc/navToRecord" slot="footer">
            Navigate to a record page. In this example, a contact.
        </c-view-source>
    </lightning-card>
</template>
